<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
//富文本编辑器
//vue的使用
import { onMounted} from "vue";
import E from "wangeditor"
const props=defineProps({
    contents:{
        default:""
    }
})
const emit=defineEmits(['content'])
// 相当于js的变量设置
//methods里创建调用、或是mounted里面直接生产
let editor = null
onMounted(()=>{
// console.log(props.contents);
editor = new E("#wangeditor");//获取组件并构造编辑器
editor.create(); // 创建富文本实例
if(!props.contents){
    console.log(props.contents,1); 
    editor.config.onchange=(newHtml)=>{
    // console.log(newHtml);
    emit("content",newHtml)
}
}else{
    editor.txt.html(props.contents);
    editor.config.onchange=(newHtml)=>{
    emit("content",newHtml)}
}
})
// 监听 content prop 的变化
// watch(() => props.contents, (newContent) => {
//   if (editor && newContent !== editor.txt.html()) {
//     editor.txt.html(newContent);
//   }
// });
    // console.log(datacont.value);
</script>
<template>
    <div id="wangeditor">
    
    </div>
</template>
<style lang="less" scoped>

</style>
